<template>
  <div class="deepseek-container">
    <h1>DeepSeek API Integration</h1>
    <textarea v-model="inputText" placeholder="Enter your text here"></textarea>
    <button @click="sendRequest">Send Request</button>
    <div v-if="response" class="response">
      <h2>Response:</h2>
      <pre>{{ response }}</pre>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      inputText: '',
      response: null,
    };
  },
  methods: {
    async sendRequest() {
      try {
        const apiKey = 'sk-d8e13e15acba4f958ff0253ca4e02f51'; // 替换为你的DeepSeek API密钥
        const apiUrl = 'https://api.deepseek.com'; // 替换为DeepSeek的API端点

        const response = await axios.post(apiUrl, {
          text: this.inputText,
        }, {
          headers: {
            'Authorization': `Bearer ${apiKey}`,
            'Content-Type': 'application/json',
          },
        });

        this.response = response.data;
      } catch (error) {
        console.error('Error:', error);
        this.response = 'An error occurred while fetching the data.';
      }
    },
  },
};
</script>

<style scoped>
.deepseek-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
}

textarea {
  width: 100%;
  height: 150px;
  margin-bottom: 20px;
  padding: 10px;
  font-size: 16px;
}

button {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}

.response {
  margin-top: 20px;
  text-align: left;
}

pre {
  background: #f4f4f4;
  padding: 10px;
  border-radius: 5px;
}
</style>